<script setup>
import { useStore,mapState } from "vuex";
import {ref,computed} from "vue";

const name = ref("张三疯");
const changeName=()=>{
    name.value +="1";
}

const store = useStore();

console.log("store.state.count", store.state.count);
console.log("store", store);

const addCount = () => {
    // 提交mutations，来修改state
    // store.commit("increment",2);
    console.log("store.state.count",store.state.count);
    store.commit({
        type: "increment",
        inc: 2
    });
    console.log("store.state.count",store.state.count);

}

const reduceCount = () => {
    store.commit({
        type: "decrement",
        dec: 1
    })
}

const addCountAsync = () => {
    console.log("addCountAsync");
    // 派发action
    store.dispatch({
        type:"incrementAction"
    })
}


// const count = computed(()=>store.state.count)
// const age = computed(()=>store.state.age)

const state1 =  mapState(["count","age"]);

console.log("state1.count",state1.count);

const isAllowMarry = computed(()=>store.getters.isAllowMarry)

</script>

<template>
    <h1>vuex的示例：</h1>
    <!-- <p>$store.state.count：{{ state1.count() }}</p> -->
    <input type="button" value="增加" @click="addCount" />
    <input type="button" value="减法" @click="reduceCount" />
    <input type="button" value="增加用异步（连后端）" @click="addCountAsync" />
    <p>name:{{name}}</p>
    <input type="button" value="修改name" @click="changeName">
    <!-- <p>年龄：{{state1.age()}}</p> -->
    <p>是否允许结婚：{{isAllowMarry}}</p>
</template>

<style lang="css" scoped></style>
